<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate ? true : false"
        @close="baTable.toggleForm"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    label-position="right"
                    :label-width="baTable.form.labelWidth + 'px'"
                    :rules="rules"
                >
                <FormItem :label="'客户简称'" 
                v-model="baTable.form.items!.CORP" 
                prop="CORP" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'CORP',
                    field: 'CORP',
                    'remote-url': '/admin/corplib/index',
                    placeholder: t('Click Select'),
                }"
                />
                <FormItem :label="'对账单名称'" type="string" v-model="baTable.form.items!.TITLE" prop="TITLE" :input-attr="{ placeholder: t('Please input field') }" />
                <!-- <FormItem :label="t('dzdgs.SORTNO')" type="number" prop="SORTNO" v-model.number="baTable.form.items!.SORTNO" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('dzdgs.SORTNO') }) }" /> -->
                <FormItem :label="'备注'" type="string" v-model="baTable.form.items!.NOTE" prop="NOTE" :input-attr="{ placeholder: t('Please input field') }" />
                <!-- <FormItem :label="t('dzdgs.OP')" type="string" v-model="baTable.form.items!.OP" prop="OP" :input-attr="{ placeholder: t('Please input field', { field: t('dzdgs.OP') }) }" />
                <FormItem :label="t('dzdgs.OPDEPT')" type="string" v-model="baTable.form.items!.OPDEPT" prop="OPDEPT" :input-attr="{ placeholder: t('Please input field', { field: t('dzdgs.OPDEPT') }) }" />
                <FormItem :label="t('dzdgs.OPTIME')" type="datetime" v-model="baTable.form.items!.OPTIME" prop="OPTIME" :input-attr="{ placeholder: t('Please select field', { field: t('dzdgs.OPTIME') }) }" /> -->
                </el-form>
            </div>
            <div style="padding: 20px 80px;" class="draggable">
                <el-table
                    ref="multipleTableRef"
                    :data="state.tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                    :height="400"
                    row-key="ID"
                >
                    <el-table-column type="selection" width="36"/>
                    <el-table-column label="操作"  width="55" align="center">
                        <template #default="scope">
                            <el-icon class="operate" style="cursor:pointer;"><Sort /></el-icon>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="序号" type="index" align="center" :index="index=>index+1" width="55"/> -->
                    <el-table-column label="序号" property="ID"  align="center"  width="55"/>
                    <el-table-column label="项目名称" property="COLLABEL" min-width="150" show-overflow-tooltip/>
                    <el-table-column label="表名" property="TABLENAME" min-width="80" show-overflow-tooltip />
                    <el-table-column label="代码" property="COLNAME" min-width="80" show-overflow-tooltip/>
                    <el-table-column label="操作人" property="OP" width="100" />
                    <el-table-column label="操作时间" property="OPTIME" />
                </el-table>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="handleSave" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted ,nextTick, watchEffect} from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import { Sort } from '@element-plus/icons-vue'
import createAxios from '/@/utils/axios'
import Sortable from 'sortablejs'
import { table } from 'console'

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    TITLE: [buildValidatorData({ name: 'required', title: t('对账单名称') })],
    OPTIME: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('dzdgs.OPTIME') })})],
})

const state:{
    multipleSelection:any[]
    tableData:any[]
} = reactive({
    multipleSelection:[],
    tableData:[
    ]
})


watchEffect(()=>{
    if(baTable.form.operate == 'add'){
        baTable.form.items!.CORP = ""
        getDefaultTable()
    }
    if(baTable.form.operate == ''){
        state.tableData = []
    }
    if(baTable.form.operate=="edit"&&baTable.form.items!.all){
        
        state.tableData = baTable.form.items!.all

        nextTick(()=>{
            nextTick(()=>{
                state.tableData.map((item:any)=>{
                    if(item.GSID){
                        multipleTableRef.value!.toggleRowSelection(item, undefined)
                    }
                })
            })
            initSortTable()
        })
    }
})

const handleSave = ()=>{
    baTable.form.items!.DZDGSDETAIL = state.multipleSelection
    baTable.onSubmit(formRef.value)
}

const handleSelectionChange = (val:any)=>{
    state.multipleSelection = val
}



const getDefaultTable = ()=>{
    createAxios({
        url:'/admin/dzdgs/dzdcolumn'
    }).then((res:any)=>{
        state.tableData = res.data
        nextTick(()=>{
            initSortTable()
        })
    })
}

const multipleTableRef = ref()
const initSortTable = ()=>{
    // console.log(multipleTableRef.value)
    let tbody:any = multipleTableRef.value.$el.querySelector('.el-table__body tbody')
    // console.log(tbody)
    Sortable.create(tbody,{
        // draggable:'.draggable .el-table__row',
        handle:'.operate',
        animation:0,
        onEnd:({newIndex=0,oldIndex=0})=>{
            console.log(newIndex,oldIndex)
            const arr = state.tableData
            const currRow = arr.splice(oldIndex,1)[0]
            arr.splice(newIndex,0,currRow)
            state.tableData = []
            nextTick(()=>{
                state.tableData = arr
            })
        }
    })
}

</script>

<style scoped lang="scss">
.draggable{
    position: relative;
}
</style>
